<style>
    .graph-container {
        box-sizing: border-box;
        width: 100%;
        height: 400px;
        padding: 20px 15px 15px 15px;
        margin: 15px auto 30px auto;
        border: 1px solid #ddd;
        background: #fff;
        background: linear-gradient(#f6f6f6 0, #fff 50px);
        background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
        background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
        background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
        background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    }

    .graph-placeholder {
        width: 100%;
        height: 100%;
        font-size: 14px;
        line-height: 1.2em;
    }
</style>
<div class="graph-container">
    <div id="graph_sales" class="graph-placeholder"></div>
    <p id="choices" style="float:right; width:135px;"></p>
</div>

<script type="text/javascript">
    $(function() {
        var data = [];
        data.push($.parseJSON('<?php echo $data ?>'));

        var plot = $.plot("#graph_sales", data, {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true
                }
            },
            grid: {
                hoverable: true,
                clickable: true
            },
            yaxis: {
                min: 0
            },
            xaxis: {
                mode: "time",
                timeformat: "%Y-%m"
            }
        });

        $("<div id='tooltip'></div>").css({
            position: "absolute",
            display: "none",
            border: "1px solid #fdd",
            padding: "2px",
            "background-color": "#fee",
            opacity: 0.80
        }).appendTo("body");

        $("#graph_sales").bind("plothover", function(event, pos, item) {
            if (item) {
                var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                $("#tooltip").html(y).css({top: item.pageY + 5, left: item.pageX + 5}).fadeIn(200);
            } else {
                $("#tooltip").hide();
            }

        });
    });

</script>